{% extends "registration/base.html" %}

{% block content %}
<style type="text/css">
html{font-size:10px;}
header{display: flex; justify-content: center; align-items: center; width:37.5rem;height:4rem; background-color: #FFF; font-size:1.8rem; font-weight: bold;}

div.img-logo{text-align: center; margin-top: 4.1rem; margin-bottom: 3.8rem;}
img.img-logo{width: 15rem;}
.title{height:25px;font-size:18px;font-family:PingFangSC-Medium,PingFang SC;font-weight:500; margin-bottom: 5rem; text-align: center;}
.input-row{margin-top: 2rem; text-align: center; position: relative;}
.input-row input{width:30.5rem;height:4.4rem;border-radius:2.2rem;border:0.1rem solid rgba(229,229,229,1); font-size: 1.4rem; text-indent: 2rem;}
.get_code{position: absolute; right: 5.5rem;height:2rem;font-size:1.4rem;
font-family:PingFangSC-Medium,PingFang SC;font-weight:500;color:rgba(51,51,51,1);line-height:2rem; text-decoration: none;}
.btn_save{width:30.5rem;height:4.4rem;background:rgba(0,185,255,1);border: none;border-radius:2.2rem;margin-top: 4rem;font-size:1.8rem;font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;color:rgba(255,255,255,1);}
.footer{margin: 8rem auto 0 auto; width:30.5rem;
background:rgba(255,255,255,1); font-size: 1.2rem;}
.btn-loading{ background-color: #7FDCFF;}
.code-loading{color: #999;}
.icon-shut{width: 1.4rem; height: 1.4rem; position: absolute; right: 5.5rem;}
.hidden{display: none;}
</style>

<div class="login-sms-content">
    <header>yourhost</header>
    <div class="img-logo">
        <img class="img-logo" src="/static/images/accounts/img_logo.png"/>
    </div>
    <div class="title">请验证你的手机号</div>
    <form class="login_form" method="post" action="{% url 'login_sms' %}">
    {% csrf_token %}
        <div class="input-row" style="display: flex; justify-content: center; align-items: center;">
            <input type="number" maxlength="11" v-model="phone" @keyup="check($event)" placeholder="输入手机号">
            <img v-if="icon_shut_show" @click="phone='';icon_shut_show=false;" class="icon-shut" src="/static/images/accounts/icon_shut.png"/>
        </div>
        <div class="input-row" style="display: flex; justify-content: center; align-items: center;">
            <input type="number" maxlength="6" v-model="sms_code" @keyup="check($event)" placeholder="输入验证码">
            <a @click="getVerifyCode()" id="get_code" v-bind:class="['get_code', get_code_disabled?'code-loading':'']">[[ btnTitle ]]</a>
        </div>
        <div class="button-row" style="text-align: center;">
            <input type="button" v-bind:class="['btn_save', btn_save_disabled?'btn-loading':'']" value="立即验证" @click="save()">
        </div>
        <input type="hidden" name="next" value="{{ next }}">
    </form>
    <div class="footer">
        <div>1.购买/收听「yourhost」的付费内容，请先验证手机号</div>
        <div>2.手机号验证后与「yourhost」账号互通，可在「yourhost」APP内收听已购内容</div>
    </div>
</div>
{% endblock %}


{% block footerjs %}
<script type="text/javascript">
var csrf = $('input[name="csrfmiddlewaretoken"]').val();
var next_url = $('input[name="next"]').val();
var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '.login-sms-content',
  data: {
      phone: '',
      sms_code: '',
      icon_shut_show: false,
      get_code_disabled: false,
      btn_save_disabled: true,
      btnTitle: '获取验证码'
  },
    methods: {
        save() {// 保存数据
            if (this.btn_save_disabled) return false;
            if (this.phone == '') {
                $.alert("请输入手机号！");
                return false;
            }
            if (this.sms_code == '') {
                $.alert("请输入验证码！");
                return false;
            }
            // ajax send data
            this.btn_save_disabled = true; // 禁用按钮点击事件
            $.ajax({
                url:'/user/login_sms',
                //url:'{% url 'login_sms' %}',
                data:{'csrfmiddlewaretoken':csrf, 'phone': this.phone, 'sms_code': this.sms_code},
                method: 'post',
                success: function(msg) {
                    //console.log(msg);
                    if (msg.retcode == 'SUCC') {
                        next_url1 = next_url.replace(new RegExp('amp;','g'),"");
                        //console.log(msg);
                        document.location.href = next_url1;
                    }else {
                        $.alert(msg.message);
                        app.btn_save_disabled = false;// 开启按钮点击权限
                    }
                }
            })
        },
        check(ev) {
            if (this.phone == '') {
                this.icon_shut_show = false;
                this.get_code_disabled = true;
            }else {
                this.icon_shut_show = true;
                this.get_code_disabled = false;
            }
            if (this.phone != '' && this.sms_code != '') this.btn_save_disabled = false;
        },
        getVerifyCode() {
            if(!/^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)){
                $.alert('请输入正确的手机号码！');
                return false;
            }
            if (this.get_code_disabled) return false;
            // send sms ajax
            // 获取验证码按钮点击事件埋点
            mobclick('login_codelogin_getcode_click');
            $.ajax({
                url: "{% url 'get_sms_code' %}",
                data:{ 'csrfmiddlewaretoken':csrf, phone: this.phone },
                method:'post',
                success:function(msg) {
                    console.log(msg);
                    if (msg.retcode == 'SUCC') {
                        $.v3ui_toast("发送成功！");
                    }
                }
            });
            //倒计时
           let time = 60;
           let timer = setInterval(() => {
           if(time == 0) {
            clearInterval(timer);
            this.get_code_disabled = false;
            this.btnTitle = "获取验证码";
           } else {
            this.btnTitle ='重新获取'+time+'s';
            this.get_code_disabled = true;
            time--;
           }
          },1000);
        }
    }
})
</script>
{% endblock footerjs %}
